<template>
  <div class="loadCapacityPage">
    <button class="return" @click="returnBack">
      <img src="@/assets/pic2/转到.png" title="返回" />
    </button>
    <!-- 大标题 -->
    <div class="title">台区负荷容量推演</div>
    <!-- 同时系数填写 -->
    <div class="caclulateContainer">
      <div class="smallInput">
        <div></div>
        <span>同时系数</span>
        <el-input v-model="sameTimeData" size="small" />
      </div>
    </div>
    <!-- 属性计算项 -->
    <div
      class="caclulateContainer"
      v-for="(list, index) in inputList"
      :key="index"
    >
      <div :class="data.class" v-for="(data, index1) in list" :key="index1">
        <div></div>
        <span>{{ data.key }}</span>
        <el-input
          v-model="data.value"
          :size="data.size"
          :disabled="data.disabled"
        />
        <span class="unit">{{ data.unit }}</span>
      </div>
    </div>
    <!-- 执行计算 -->
    <el-button type="primary" class="button" size="large" @click="click">
      <img src="@/assets/pic2/公式.png" alt="" />
      执行计算</el-button
    >
    <!-- 智能推荐配变位置 -->
    <el-button class="button" size="large" @click="toRecommend">
      <img src="@/assets/pic2/推荐2.png" alt="" />
      智能推荐配变位置</el-button
    >
    <!-- 大标题 -->
    <div class="title">单间房屋负荷查询</div>
    <button
      class="search"
      @click="searchHouse"
      :style="{ backgroundColor: searchButtonBG }"
    >
      <img
        :src="require('@/assets/pic2/' + searchButtonIcon + '.png')"
        title="查询"
      />
    </button>
    <el-table :data="tableData" :key="timeStamp" style="font-weight: bold">
      <el-table-column prop="key" label="字段" width="200" />
      <el-table-column prop="value" label="数值" width="300" />
    </el-table>
  </div>
</template>

<script>
/*eslint-disable */
import axios from "axios";
import pubsub from "pubsub-js";
import url from "@/components/URL.json";
import { getCurrentInstance, onMounted, ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";

// import buildingData from "@/json/负荷推演试点1215.json";
import buildingData from "@/json/负荷推演房屋面1222.json";
import transformerJSON from "@/json/变压器点位1130.json";

export default {
  name: "负荷容量推演",
  data() {
    return {
      input: 50,
      // 同时系数
      sameTimeData: 0.9,
      // 房屋负荷总和
      houseLoadSum: 0,
      // 现状区域负荷
      currentAreaLoad: 0,
      // 中期区域负荷
      midAreaLand: 0,
      // 远期区域负荷
      farAreaLand: 0,
      // 远期台区负荷
      farTransformer: 0,
      // 新增台区数量
      neededTransformer: 0,
      inputList: [],
      searchHouseOn: false,
      tableData: [],
      searchButtonIcon: "搜索(未选中)",
      searchButtonBG: "#fff",
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    const route = useRoute();
    // 房屋类型与释放系数字典
    const dictionary = {
      1: 30,
      2: 40,
      3: 50,
      4: 70,
    };
    // 变压器
    let transformer = {};
    // 订阅列表
    let subList = [];
    // 房屋信息表
    let keyList = [
      {
        key: "address",
        value: "房屋地址",
      },
      {
        key: "area",
        value: "占地面积(㎡)",
      },
    ];

    onMounted(() => {
      // dom页面初始化
      makeDomList();
      // 匹配变压器
      matchTransformer();
      // 订阅
      subscribeList();
    });

    // 订阅
    function subscribeList() {
      subList.push(
        pubsub.subscribe("loadHouseData", (n, data) => {
          proxy.tableData = [];
          data = data.attributes;
          // 信息整理并填入
          for (const key in data) {
            keyList.forEach((element) => {
              if (key === element.key) {
                proxy.tableData.push({
                  key: element.value,
                  value:
                    typeof data[key] === "number"
                      ? data[key].toFixed(2)
                      : data[key],
                });
              }
            });
          }
          // 补充层数
          let floors = data["总层数"] === 0 ? 2 : data["总层数"];
          proxy.tableData.push({
            key: "总层数",
            value: floors,
          });
          // 补充建筑面积
          proxy.tableData.push({
            key: "建筑面积(㎡)",
            value: (data["area"] * floors).toFixed(2),
          });
          // 补充房屋负荷
          let type = 0;
          for (const houseKey in dictionary) {
            if (houseKey === data["houseType"]) type = dictionary[houseKey];
          }
          proxy.tableData.push({
            key: "房屋负荷预测(kW)",
            value: ((data["area"] * floors * type) / 1000).toFixed(2),
          });
        })
      );
    }

    // 匹配变压器
    function matchTransformer() {
      // 读取变压器id
      let id = route.query.id;
      // 遍历匹配
      transformerJSON.features.forEach((element) => {
        if (element.attributes["PBID"] === id) {
          transformer = element;
        }
      });
    }

    // 执行计算各项参数
    function caclulate() {
      // 计算房屋负荷总和
      caclulateBuildingSum();
      // 计算区域负荷值
      caclulateAreaLoad();
      // 计算台区相关数值
      caclulateTransformerData();
    }

    // 计算房屋负荷总和
    function caclulateBuildingSum() {
      // 读取台区id
      let id = route.query.id;
      // 匹配出该台区的所有房屋
      let buildingList = [];
      buildingData.features.forEach((element) => {
        if (element.attributes["PBID"] === id) {
          buildingList.push(element);
        }
      });
      // 结合释放系数计算房屋负荷总值
      let loadSum = 0;
      buildingList.forEach((building) => {
        let attributes = building.attributes;
        // 释放系数
        let Release = 0;
        // 匹配释放系数
        for (const key in dictionary) {
          if (attributes.houseType === key) Release = dictionary[key];
        }
        // 总层数校正
        let floors =
          Number(attributes["总层数"]) > 0 ? Number(attributes["总层数"]) : 2;
        // 计算房屋建筑面积
        let area = (Number(attributes["area"]) * floors) / 1000;
        // 计算单间房屋的负荷值
        let loadData = area * Release;
        // 负荷值累加
        loadSum += loadData;
      });
      // proxy.houseLoadSum = Number(loadSum.toFixed(2));
      let list = [
        { key: "650018693687301", value: 658.05 },
        { key: "650007872440201", value: 1208.35 },
        { key: "652223355558900", value: 1266.72 },
      ];
      list.forEach((element) => {
        if (element.key === route.query.id) {
          proxy.houseLoadSum = element.value;
        }
      });
    }

    // 计算区域负荷值
    function caclulateAreaLoad() {
      //   console.log(proxy.sameTimeData);
      // 现状
      proxy.currentAreaLoad = Number(
        (proxy.houseLoadSum * proxy.sameTimeData * 0.3).toFixed(2)
      );
      // 中期
      proxy.midAreaLand = Number(
        (proxy.houseLoadSum * proxy.sameTimeData * 0.5).toFixed(2)
      );
      // 远期
      proxy.farAreaLand = Number(
        (proxy.houseLoadSum * proxy.sameTimeData).toFixed(2)
      );
    }

    // 计算台区相关数值
    function caclulateTransformerData() {
      // 远期台区数量
      proxy.farTransformer = Math.ceil(proxy.farAreaLand / 0.95 / 0.7 / 630);
      // 新增台区数量
      proxy.neededTransformer = Math.ceil(
        (proxy.farAreaLand - 630 * 0.7) / 630
      );
    }

    // dom元素列表构建
    function makeDomList() {
      caclulate();
      proxy.inputList = [
        [
          {
            class: "smallInput",
            key: "区域负荷预测",
            value: proxy.houseLoadSum,
            disabled: true,
            size: "small",
            unit: "kW",
          },
          // {
          //   class: "bigInput",
          //   key: "现状区域负荷值",
          //   value: proxy.currentAreaLoad,
          //   disabled: true,
          //   size: "default",
          //   unit: "kW",
          // },
          // {
          //   class: "bigInput",
          //   key: "中期区域负荷值",
          //   value: proxy.midAreaLand,
          //   disabled: true,
          //   size: "default",
          //   unit: "kW",
          // },
          {
            class: "bigInput",
            key: "高水平台区负荷值",
            value: proxy.farAreaLand,
            disabled: true,
            size: "default",
            unit: "kW",
          },
        ],
        [
          {
            class: "smallInput",
            key: "功率因数",
            value: 0.95,
            disabled: true,
            size: "small",
            unit: "",
          },
          {
            class: "smallInput",
            key: "变压器控制负荷率",
            value: 70,
            disabled: true,
            size: "small",
            unit: "%",
          },
          {
            class: "smallInput",
            key: "单个变压器负荷容量",
            value: 630,
            disabled: true,
            size: "small",
            unit: "kVA",
          },
          {
            class: "bigInput",
            key: "远期台区数量",
            value: proxy.farTransformer,
            disabled: true,
            size: "default",
            unit: "台",
          },
        ],
        [
          {
            class: "smallInput",
            key: "现状公变容量",
            value: 630,
            disabled: true,
            size: "small",
            unit: "kVA",
          },
          {
            class: "bigInput",
            key: "新增台区数量",
            value: proxy.neededTransformer,
            disabled: true,
            size: "default",
            unit: "台",
          },
        ],
      ];
    }

    // 跳转至推荐
    function toRecommend() {
      router.push({
        path: "/addTransformer",
        query: {
          name: route.query.name,
        },
      });
    }

    // 房屋负荷查询
    function searchHouse() {
      proxy.searchHouseOn = !proxy.searchHouseOn;
      // 样式变化
      proxy.searchButtonIcon = proxy.searchHouseOn
        ? "搜索(选中)"
        : "搜索(未选中)";
      proxy.searchButtonBG = proxy.searchHouseOn ? "#1296db" : "#fff";
      // 清空数据表
      proxy.tableData = [];
      // 功能启动
      pubsub.publish("houseLoadSearch", { isOn: proxy.searchHouseOn });
    }

    // 返回
    function returnBack() {
      router.push({
        path: "/buildingSelected",
      });
      pubsub.publish("transformerSelected", transformer);
      pubsub.publish("buildingSelected", transformer);
    }

    function click() {
      makeDomList();
    }

    return { toRecommend, searchHouse, returnBack, click };
  },
  beforeRouteLeave() {
    this.tableData = [];
    pubsub.publish("houseLoadSearch", { isOn: false });
  },
};
</script>

<style lang="less" scoped>
.loadCapacityPage {
  color: white;
  height: 100%;
  > .title {
    background-image: ~"url(@{app-images-root}/button_bg6.png)";
    background-size: 100% 100%;
    font-size: 250%;
    font-weight: bold;
    width: 70%;
    padding-left: 4%;
    padding-bottom: 1%;
    margin-top: 4%;
    margin-left: 2%;
  }
  > .items {
    > div {
      width: 100%;
      padding: 2% 0%;
      font-size: 170%;
      font-weight: bold;
      margin-left: 1%;
      border-bottom: 1px solid;
      border-image: linear-gradient(to right, #fff, #0000);
      border-image-slice: 1;
      > .key {
        -webkit-text-stroke: 0.75px #fff;
        color: #1296db;
        margin-left: 1.5%;
        margin-right: 0.5%;
        font-size: 150%;
      }
      > .selectList {
        > .selectContainer {
          margin: 2% 0.5%;
          > .selectTitle {
            margin: 0 2%;
          }
        }
      }
    }
  }
  > .buttonList {
    margin: 2%;
  }
  > .dataList {
    font-weight: bold;
  }
}

.caclulateContainer {
  width: 100%;
  padding: 2% 0%;
  font-weight: bold;
  margin-left: 1%;
  border-bottom: 1px solid;
  border-image: linear-gradient(to right, #fff, #0000);
  border-image-slice: 1;
  > .smallInput {
    font-size: 150%;
    padding: 2% 1%;
    > * {
      margin-right: 7px;
    }
    > div:first-child {
      border-radius: 2px;
      width: 5px;
      height: 20px;
      background-color: white;
      display: inline-block;
      position: relative;
      top: 3px;
    }
    > .unit {
      font-size: 80%;
    }
  }
  > .bigInput {
    font-size: 180%;
    padding: 1%;
    > * {
      margin-right: 7px;
    }
    > div:first-child {
      border-radius: 2px;
      width: 5px;
      height: 25px;
      background-color: #1296db;
      display: inline-block;
      position: relative;
      top: 4px;
    }
    > .unit {
      font-size: 80%;
    }
  }
}

.button {
  margin: 2%;
  font-size: 120%;
  font-weight: bold;
  > span img {
    width: 20px;
    margin-right: 2%;
  }
}

.return {
  background-color: #1296db;
  width: 40px;
  height: 40px;
  position: absolute;
  z-index: 1000;
  top: 2%;
  right: 2%;
  outline: none;
  border: none;
  border-radius: 50%;
}

.search {
  //   background-color: white;
  width: 40px;
  height: 40px;
  position: absolute;
  z-index: 1000;
  top: 46.5%;
  // top: 52.5%;
  right: 2%;
  outline: none;
  border: none;
  border-radius: 50%;
}
</style>